<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 新版统一仪表盘</title>
    <style>
        :root {
            /* 医院色系配色方案 */
            --main-color: #1A7BB9; /* 医疗蓝 */
            --secondary-color: #4CB050; /* 医疗绿 */
            --warning-color: #FF9800; /* 琥珀色/警示色 */
            --danger-color: #E53935; /* 医疗红/紧急色 */
            --bg-color: #F5F7FA; /* 浅灰背景 */
            --panel-bg: #FFFFFF; /* 白色面板 */
            --text-primary: #263238; /* 深灰文本 */
            --text-secondary: #546E7A; /* 中灰文本 */
            --text-light: #90A4AE; /* 浅灰文本 */
            --border-color: #E0E0E0; /* 边框色 */
            --accent-color: #8E24AA; /* 紫色强调色 */
            --light-blue: #E3F2FD; /* 浅蓝背景 */
            --light-green: #E8F5E9; /* 浅绿背景 */
            --light-purple: #F3E5F5; /* 浅紫背景 */
            --light-orange: #FFF3E0; /* 浅橙背景 */
            
            /* 尺寸变量 */
            --header-height: 50px;
            --bottom-nav-height: 60px;
            --content-padding: 15px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--text-primary);
            background-color: var(--bg-color);
            padding-bottom: var(--bottom-nav-height);
        }
        
        /* 头部样式 */
        .header {
            height: var(--header-height);
            background-color: var(--main-color);
            display: flex;
            align-items: center;
            padding: 0 var(--content-padding);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: white;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: 600;
            flex-grow: 1;
            color: white;
        }
        
        .header-icons {
            display: flex;
            gap: 15px;
        }
        
        .header-icon {
            width: 24px;
            height: 24px;
            cursor: pointer;
            color: white;
        }
        
        /* 搜索栏样式 */
        .search-bar {
            margin: 15px var(--content-padding);
            background-color: var(--panel-bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding: 10px 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }
        
        .search-bar input {
            border: none;
            outline: none;
            flex-grow: 1;
            font-size: 16px;
            margin-left: 10px;
            color: var(--text-primary);
        }
        
        /* 通知中心样式 */
        .message-center {
            margin: 15px var(--content-padding);
            background-color: var(--panel-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }
        
        .message-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--light-blue);
        }
        
        .message-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--main-color);
        }
        
        .message-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--panel-bg);
        }
        
        .message-tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            cursor: pointer;
            position: relative;
            color: var(--text-secondary);
        }
        
        .message-tab.active {
            color: var(--main-color);
            font-weight: 500;
        }
        
        .message-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: var(--main-color);
            border-radius: 3px;
        }
        
        .message-list {
            max-height: 300px;
            overflow-y: auto;
            background-color: var(--panel-bg);
        }
        
        .message-item {
            padding: 15px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
        }
        
        .message-item:last-child {
            border-bottom: none;
        }
        
        .message-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .message-icon.pending {
            background-color: var(--light-blue);
            color: var(--main-color);
        }
        
        .message-icon.approved {
            background-color: var(--light-green);
            color: var(--secondary-color);
        }
        
        .message-icon.rejected {
            background-color: #FFEBEE; /* 浅红色背景 */
            color: var(--danger-color);
        }
        
        .message-content {
            flex-grow: 1;
        }
        
        .message-title {
            font-size: 15px;
            margin-bottom: 4px;
        }
        
        .message-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .message-time {
            font-size: 12px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        /* 常用功能样式 */
        .frequent-functions {
            margin: 20px var(--content-padding);
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .section-more {
            font-size: 14px;
            color: var(--main-color);
        }
        
        .function-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .function-card {
            background-color: var(--panel-bg);
            border-radius: 10px;
            padding: 15px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
            border: 1px solid var(--border-color);
        }
        
        .function-card:active {
            transform: scale(0.95);
        }
        
        .function-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
        }
        
        .function-card:active .function-icon {
            transform: scale(0.9);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .function-icon.blue {
            background-color: var(--light-blue);
            color: var(--main-color);
        }
        
        .function-icon.green {
            background-color: var(--light-green);
            color: var(--secondary-color);
        }
        
        .function-icon.yellow {
            background-color: var(--light-orange);
            color: var(--warning-color);
        }
        
        .function-icon.red {
            background-color: #FFEBEE; /* 浅红色背景 */
            color: var(--danger-color);
        }
        
        .function-name {
            font-size: 13px;
            text-align: center;
            color: var(--text-primary);
        }
        
        /* 最近访问样式 */
        .recent-access {
            margin: 20px var(--content-padding);
        }
        
        .recent-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .recent-item {
            background-color: var(--panel-bg);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }
        
        .recent-item-title {
            font-size: 15px;
            margin-bottom: 8px;
            color: var(--text-primary);
        }
        
        .recent-item-desc {
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .recent-item-time {
            font-size: 12px;
            color: var(--text-light);
            margin-top: 8px;
        }
        
        /* 底部导航样式 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--bottom-nav-height);
            background-color: var(--panel-bg);
            display: flex;
            border-top: 1px solid var(--border-color);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 0;
        }
        
        .nav-icon {
            width: 28px;
            height: 28px;
            margin-bottom: 4px;
            color: var(--text-secondary);
        }
        
        .nav-label {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .nav-item.active .nav-label {
            color: var(--main-color);
            font-weight: 500;
        }
        
        .nav-item.active .nav-icon {
            color: var(--main-color);
        }
        
        /* 应用页面样式 */
        .app-page {
            display: none;
            padding: 15px var(--content-padding);
        }
        
        .app-category {
            margin-bottom: 20px;
        }
        
        .category-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .app-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        /* 我的页面样式 */
        .profile-page {
            display: none;
            padding: 15px var(--content-padding);
        }
        
        .profile-header {
            background-color: var(--light-blue);
            border-radius: 10px;
            padding: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }
        
        .profile-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--main-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }
        
        .profile-info {
            flex-grow: 1;
        }
        
        .profile-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--text-primary);
        }
        
        .profile-role {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .profile-buttons {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        .profile-button {
            padding: 8px 16px;
            background-color: white;
            border-radius: 20px;
            font-size: 13px;
            color: var(--main-color);
            border: 1px solid var(--main-color);
        }
        
        .profile-sections {
            display: grid;
            gap: 15px;
        }
        
        .profile-section {
            background-color: var(--panel-bg);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }
        
        .profile-section-header {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            font-size: 16px;
            font-weight: 600;
            background-color: var(--light-blue);
            color: var(--main-color);
        }
        
        .profile-section-content {
            padding: 0;
        }
        
        .profile-menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .profile-menu-item:last-child {
            border-bottom: none;
        }
        
        .profile-menu-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            color: var(--main-color);
        }
        
        .profile-menu-text {
            flex-grow: 1;
            font-size: 15px;
            color: var(--text-primary);
        }
        
        .profile-menu-arrow {
            color: var(--text-light);
        }
        
        /* 通用工具类 */
        .hidden {
            display: none;
        }
        
        .visible {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-title">H+移动工作平台</div>
        <div class="header-icons">
            <div class="header-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
            </div>
            <div class="header-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
            </div>
        </div>
    </div>
    
    <!-- 首页内容 -->
    <div id="homePage">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
            </span>
            <input type="text" placeholder="搜索功能、文档、物资...">
        </div>
        
        <!-- 通知中心 -->
        <div class="message-center">
            <div class="message-header">
                <div class="message-title">统一消息中心</div>
                <span>查看全部 ></span>
            </div>
            <div class="message-tabs">
                <div class="message-tab active">待办</div>
                <div class="message-tab">流程</div>
                <div class="message-tab">通知</div>
                <div class="message-tab">公告</div>
            </div>
            <div class="message-list">
                <div class="message-item">
                    <div class="message-icon pending">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
                    </div>
                    <div class="message-content">
                        <div class="message-title">报销申请待审批</div>
                        <div class="message-desc">李护士提交的办公用品报销 ¥280.50</div>
                        <div class="message-time">10分钟前</div>
                    </div>
                </div>
                <div class="message-item">
                    <div class="message-icon approved">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="message-content">
                        <div class="message-title">物资申领已批准</div>
                        <div class="message-desc">您的门诊医疗耗材申领已通过</div>
                        <div class="message-time">1小时前</div>
                    </div>
                </div>
                <div class="message-item">
                    <div class="message-icon rejected">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                    </div>
                    <div class="message-content">
                        <div class="message-title">资产盘点待确认</div>
                        <div class="message-desc">神经外科资产清点结果需确认</div>
                        <div class="message-time">昨天 15:30</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 常用功能 -->
        <div class="frequent-functions">
            <div class="section-header">
                <div class="section-title">常用功能</div>
                <div class="section-more">管理 ></div>
            </div>
            <div class="function-grid">
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
                    </div>
                    <div class="function-name">报销申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                    </div>
                    <div class="function-name">领料申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                    </div>
                    <div class="function-name">薪酬查询</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                    </div>
                    <div class="function-name">请假申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
                    </div>
                    <div class="function-name">个人资产</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
                    </div>
                    <div class="function-name">预算管理</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    </div>
                    <div class="function-name">库存查询</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="function-name">资产盘点</div>
                </div>
            </div>
        </div>
        
        <!-- 最近访问 -->
        <div class="recent-access">
            <div class="section-header">
                <div class="section-title">最近使用</div>
                <div class="section-more">更多 ></div>
            </div>
            <div class="recent-grid">
                <div class="recent-item">
                    <div class="recent-item-title">报销申请</div>
                    <div class="recent-item-desc">差旅费用报销 - ¥2,356.50</div>
                    <div class="recent-item-time">今天 10:30</div>
                </div>
                <div class="recent-item">
                    <div class="recent-item-title">领料申请</div>
                    <div class="recent-item-desc">门诊手术所需医疗耗材</div>
                    <div class="recent-item-time">昨天 15:42</div>
                </div>
                <div class="recent-item">
                    <div class="recent-item-title">个人资产</div>
                    <div class="recent-item-desc">医疗设备资产清单查询</div>
                    <div class="recent-item-time">昨天 09:15</div>
                </div>
                <div class="recent-item">
                    <div class="recent-item-title">薪酬查询</div>
                    <div class="recent-item-desc">上月绩效工资明细</div>
                    <div class="recent-item-time">2天前</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 应用页面 -->
    <div class="app-page" id="appPage">
        <div class="app-category">
            <div class="category-title">财务管理</div>
            <div class="app-grid">
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"></rect><line x1="2" y1="10" x2="22" y2="10"></line></svg>
                    </div>
                    <div class="function-name">报销申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
                    </div>
                    <div class="function-name">预算管理</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                    </div>
                    <div class="function-name">出差申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
                    </div>
                    <div class="function-name">对公报账</div>
                </div>
            </div>
        </div>
        
        <div class="app-category">
            <div class="category-title">物资管理</div>
            <div class="app-grid">
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    </div>
                    <div class="function-name">库存查询</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                    </div>
                    <div class="function-name">领料申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                    </div>
                    <div class="function-name">物资入库</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                    </div>
                    <div class="function-name">物资出库</div>
                </div>
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
                    </div>
                    <div class="function-name">个人资产</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
                    </div>
                    <div class="function-name">资产调拨</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                    </div>
                    <div class="function-name">资产申购</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    </div>
                    <div class="function-name">资产盘点</div>
                </div>
            </div>
        </div>
        
        <div class="app-category">
            <div class="category-title">人事管理</div>
            <div class="app-grid">
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    </div>
                    <div class="function-name">个人档案</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                    </div>
                    <div class="function-name">薪酬查询</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                    </div>
                    <div class="function-name">请假申请</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                    </div>
                    <div class="function-name">休假管理</div>
                </div>
            </div>
        </div>
        
        <div class="app-category">
            <div class="category-title">数据分析</div>
            <div class="app-grid">
                <div class="function-card">
                    <div class="function-icon blue">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
                    </div>
                    <div class="function-name">运营分析</div>
                </div>
                <div class="function-card">
                    <div class="function-icon green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83"></path></svg>
                    </div>
                    <div class="function-name">科室成本</div>
                </div>
                <div class="function-card">
                    <div class="function-icon yellow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                    </div>
                    <div class="function-name">绩效统计</div>
                </div>
                <div class="function-card">
                    <div class="function-icon red">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                    </div>
                    <div class="function-name">财务报表</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 我的页面 -->
    <div class="profile-page" id="profilePage">
        <div class="profile-header">
            <div class="profile-avatar">👨‍⚕️</div>
            <div class="profile-info">
                <div class="profile-name">王医生</div>
                <div class="profile-role">心内科 / 主治医师</div>
                <div class="profile-buttons">
                    <div class="profile-button">编辑资料</div>
                    <div class="profile-button">切换身份</div>
                </div>
            </div>
        </div>
        
        <div class="profile-sections">
            <div class="profile-section">
                <div class="profile-section-header">个人中心</div>
                <div class="profile-section-content">
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">📊</div>
                        <div class="profile-menu-text">我的医疗数据</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">📁</div>
                        <div class="profile-menu-text">我的患者档案</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">⭐</div>
                        <div class="profile-menu-text">我的收藏</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">🔔</div>
                        <div class="profile-menu-text">消息设置</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                </div>
            </div>
            
            <div class="profile-section">
                <div class="profile-section-header">系统设置</div>
                <div class="profile-section-content">
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">🎨</div>
                        <div class="profile-menu-text">主题设置</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">🔒</div>
                        <div class="profile-menu-text">隐私安全</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">⚙️</div>
                        <div class="profile-menu-text">通用设置</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                    <div class="profile-menu-item">
                        <div class="profile-menu-icon">❓</div>
                        <div class="profile-menu-text">帮助与反馈</div>
                        <div class="profile-menu-arrow">></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" data-page="homePage">
            <div class="nav-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
            </div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" data-page="appPage">
            <div class="nav-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            </div>
            <div class="nav-label">应用</div>
        </div>
        <div class="nav-item" data-page="profilePage">
            <div class="nav-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
            </div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        // 页面元素
        const homePage = document.getElementById('homePage');
        const appPage = document.getElementById('appPage');
        const profilePage = document.getElementById('profilePage');
        
        // 底部导航切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                // 更新导航项激活状态
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                this.classList.add('active');
                
                // 获取要显示的页面ID
                const pageId = this.getAttribute('data-page');
                
                // 隐藏所有页面
                homePage.style.display = 'none';
                appPage.style.display = 'none';
                profilePage.style.display = 'none';
                
                // 显示选中的页面
                document.getElementById(pageId).style.display = 'block';
            });
        });
        
        // 消息标签页切换
        document.querySelectorAll('.message-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.message-tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
    </script>
</body>
</html> 